import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtCard } from 'taro-ui'
// eslint-disable-next-line import/first
import { Card, UserPanel } from '@/types/global';
import "./index.less";

interface CardRowProps {
  cards: Card[];
  isCurrentPlayerTurn?: boolean;
  currentPlayerPanel?: UserPanel;
  hasEnoughGemsToBuyCard?: (playerPanel: UserPanel, card: Card) => boolean;
  onCardClick?: (card: Card) => void; // 添加卡片点击回调
  selectedCardId?: string; // 当前选中的卡片ID
  isReservedCardRow?: boolean; // 是否为保留卡片行
  cardLevel?: number; // 卡片等级，用于区分不同等级的卡片样式
}

// 卡片行组件
const CardRow = ({ cards, isCurrentPlayerTurn, currentPlayerPanel, hasEnoughGemsToBuyCard, onCardClick, selectedCardId, isReservedCardRow, cardLevel }: CardRowProps) => {
  return (
    <View className={`card-row ${isReservedCardRow ? 'reserved-card-row' : ''}`}>
      {cards.map(card => {
        // 检查是否是当前玩家的回合，并且玩家有足够的宝石购买这张卡片
        const isBuyable = isCurrentPlayerTurn && currentPlayerPanel && hasEnoughGemsToBuyCard && 
                          hasEnoughGemsToBuyCard(currentPlayerPanel, card);
        
        // 检查是否是选中的卡片
        const isSelected = selectedCardId === card.id;
        
        // 根据卡片等级确定样式类名
        const cardLevelClass = cardLevel ? `card-level-${cardLevel}` : '';
        
        // 检查是否为等级四的卡片
        const isLevelFourCard = card.level === 4;
        
        return (
          <AtCard
            key={card.id}
            // title={card.title}
            className={`card-item ${cardLevelClass} ${isBuyable ? 'buyable-card' : ''} ${isSelected ? 'selected-card' : ''} ${isReservedCardRow ? 'reserved-card' : ''} ${isLevelFourCard ? 'level-four-card' : ''}`}
            onClick={() => {
              console.log(card, 'card');
              // 触发卡片点击回调
              onCardClick && onCardClick(card);
            }}
          >
          </AtCard>
        );
      })}
      
      {/* 如果是保留卡片行且卡片数量不足3个，则添加空的灰色卡片格 */}
      {isReservedCardRow && cards.length < 3 && (
        Array.from({ length: 3 - cards.length }).map((_, index) => (
          <View key={`empty-${index}`} className='card-item reserved-card empty-reserved-card'></View>
        ))
      )}
    </View>
  )
}

interface CardsProps {
  cardListA?: Card[]; // 类型为1的卡片（等级一）
  cardListB?: Card[]; // 类型为2的卡片（等级二）
  cardListC?: Card[]; // 类型为3的卡片（等级三）
  cardListD?: Card[]; // 类型为4的卡片（等级四）
  currentPlayerIp?: string; // 当前回合玩家IP
  currentPlayerPanel?: UserPanel; // 当前玩家面板数据
  hasEnoughGemsToBuyCard?: (playerPanel: UserPanel, card: Card) => boolean; // 检查玩家是否有足够宝石购买卡片的函数
  onCardClick?: (card: Card) => void; // 添加卡片点击回调
  selectedCardId?: string; // 当前选中的卡片ID
  reservedCards?: Card[]; // 保留的卡片
}

const Cards = ({ 
  cardListA, 
  cardListB, 
  cardListC, 
  cardListD,
  currentPlayerIp,
  currentPlayerPanel,
  hasEnoughGemsToBuyCard,
  onCardClick,
  selectedCardId,
  reservedCards = [] // 默认为空数组
}: CardsProps) => {
  // 按行组织数据：第一行4个，第二行3个，第三行4个，第四行5个
  const getCardRowsData = (): {cards: Card[], level: number}[] => {
    // 检查是否传入了卡片数据（即使是空数组也算传入了数据）
    const hasCardData = cardListA !== undefined && cardListB !== undefined && 
                        cardListC !== undefined && cardListD !== undefined;

    // 如果传入了卡片数据，则使用传入的数据
    if (hasCardData) {
      const cardList = [
        {cards: cardListD.filter(item => item.show === true), level: 4},
        {cards: cardListC.filter(item => item.show === true), level: 3},
        {cards: cardListB.filter(item => item.show === true), level: 2},
        {cards: cardListA.filter(item => item.show === true), level: 1}
      ]

      console.log(cardList , 'cardList')

      return cardList;
    }

    console.log(cardListA , 'cardListA')
    
    
    // 默认数据
    return [
      // 第一行：4个卡片（等级4）
      {
        cards: [
          { id: "1", level: 4, score: 1, discountRed: 1, discountBlue: 0, discountGreen: 0, discountWhite: 0, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "2", level: 4, score: 1, discountRed: 0, discountBlue: 1, discountGreen: 0, discountWhite: 0, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "3", level: 4, score: 1, discountRed: 0, discountBlue: 0, discountGreen: 1, discountWhite: 0, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "4", level: 4, score: 1, discountRed: 0, discountBlue: 0, discountGreen: 0, discountWhite: 1, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true }
        ],
        level: 4
      },
      // 第二行：3个卡片（等级3）
      {
        cards: [
          { id: "5", level: 3, score: 2, discountRed: 0, discountBlue: 0, discountGreen: 0, discountWhite: 0, discountBlack: 1, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "6", level: 3, score: 2, discountRed: 1, discountBlue: 0, discountGreen: 0, discountWhite: 0, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "7", level: 3, score: 2, discountRed: 0, discountBlue: 1, discountGreen: 0, discountWhite: 0, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true }
        ],
        level: 3
      },
      // 第三行：4个卡片（等级2）
      {
        cards: [
          { id: "8", level: 2, score: 3, discountRed: 0, discountBlue: 0, discountGreen: 1, discountWhite: 0, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "9", level: 2, score: 3, discountRed: 0, discountBlue: 0, discountGreen: 0, discountWhite: 1, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "10", level: 2, score: 3, discountRed: 0, discountBlue: 0, discountGreen: 0, discountWhite: 0, discountBlack: 1, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "11", level: 2, score: 3, discountRed: 1, discountBlue: 0, discountGreen: 0, discountWhite: 0, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true }
        ],
        level: 2
      },
      // 第四行：5个卡片（等级1）
      {
        cards: [
          { id: "12", level: 1, score: 4, discountRed: 0, discountBlue: 1, discountGreen: 0, discountWhite: 0, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "13", level: 1, score: 4, discountRed: 0, discountBlue: 0, discountGreen: 1, discountWhite: 0, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "14", level: 1, score: 4, discountRed: 0, discountBlue: 0, discountGreen: 0, discountWhite: 1, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "15", level: 1, score: 4, discountRed: 0, discountBlue: 0, discountGreen: 0, discountWhite: 0, discountBlack: 1, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true },
          { id: "16", level: 1, score: 4, discountRed: 1, discountBlue: 0, discountGreen: 0, discountWhite: 0, discountBlack: 0, costRed: 0, costBlue: 0, costGreen: 0, costPink: 0, costBlack: 0, costWhite: 0, crownsNum: 0, extraReward: { type: "", value: 0 }, show: true, buyable: true }
        ],
        level: 1
      }
    ];
  };

  const cardRowsData = getCardRowsData();
  
  // 判断是否是当前玩家的回合（当前玩家IP是'1'）
  const isCurrentPlayerTurn = currentPlayerIp === '1';

  return (
    <View className='card-container'>
      <View className='card-rows'>
        {cardRowsData.map((row, index) => (
          <CardRow 
            key={index} 
            cards={row.cards} 
            cardLevel={row.level}
            isCurrentPlayerTurn={isCurrentPlayerTurn}
            currentPlayerPanel={currentPlayerPanel}
            hasEnoughGemsToBuyCard={hasEnoughGemsToBuyCard}
            onCardClick={onCardClick}
            selectedCardId={selectedCardId}
          />
        ))}
        
        {/* 保留卡片行 */}
        <CardRow 
          cards={reservedCards} 
          isCurrentPlayerTurn={isCurrentPlayerTurn}
          currentPlayerPanel={currentPlayerPanel}
          hasEnoughGemsToBuyCard={hasEnoughGemsToBuyCard}
          onCardClick={onCardClick}
          selectedCardId={selectedCardId}
          isReservedCardRow
        />
      </View>
    </View>
  )
}

export default Cards